
.pattern {
    margin: 0px;
    z-index: -1;
    overflow: hidden;
    position: fixed;
    // display: none;
    inset: 0px;
    --slant-color-neutral-100: light-dark(#000, #fff);
    --slant-color-neutral-200: light-dark(#111, #f5f5f4);
    --slant-color-neutral-300: light-dark(#e7e7e4, #e7e7e4);
    --slant-color-neutral-400: light-dark(#dfded8, #dfded8);
    --slant-color-neutral-500: light-dark(#9f9d93, #9f9d93);
    --slant-color-neutral-600: light-dark(#878578, #878578);
    --slant-color-neutral-700: light-dark(#515048, #515048);
    --slant-color-neutral-700-10: rgba(81, 80, 72, .1);
    --slant-color-neutral-700-20: rgba(81, 80, 72, .2);
    --slant-color-neutral-700-40: rgba(81, 80, 72, .4);
    --slant-color-neutral-800: light-dark(#fefefe, #1a1a1a);
    --slant-color-neutral-800-40: rgba(26, 26, 26, .4);
    --slant-color-neutral-800-80: rgba(26, 26, 26, .8);
    --slant-color-neutral-800-90: rgba(26, 26, 26, .9);
    --slant-color-accent-100: #fcf9e9;
    --slant-color-accent-200: #fdf7d6;
    --slant-color-accent-300: #fdf1b0;
    --slant-color-accent-400: #fde562;
    --slant-color-accent-500: #fee34f;
    --slant-color-accent-600: #fddf3b;
    --slant-color-accent-600-20: rgba(253, 224, 59, .2);
    --slant-color-accent-600-30: rgba(253, 224, 59, .3);
    --slant-color-accent-600-40: rgba(253, 224, 59, .4);
    --slant-color-accent-600-50: rgba(253, 224, 59, .5);
    --slant-color-accent-600-80: rgba(253, 224, 59, .8);
    --slant-border-radius-00: var(--slant-size-00);
    --slant-border-radius-02: var(--slant-size-02);
    --slant-border-radius-04: var(--slant-size-04);
    --slant-border-radius-06: var(--slant-size-06);
    --slant-border-radius-08: var(--slant-size-08);
    --slant-border-radius-10: var(--slant-size-10);
    --slant-border-radius-12: var(--slant-size-12);
    --slant-border-radius-14: var(--slant-size-14);
    --slant-border-radius-16: var(--slant-size-16);
    --slant-border-radius-18: var(--slant-size-18);
    --slant-border-radius-20: var(--slant-size-20);
    --slant-border-radius-24: var(--slant-size-24);
    --slant-border-radius-90: var(--slant-size-90);
    --slant-border-radius-99: var(--slant-size-99);
    --slant-border-width-00: var(--slant-size-00);
    --slant-border-width-01: var(--slant-size-01);
    --slant-border-width-02: var(--slant-size-02);
    --slant-border-style: solid;
    --slant-font-default: var(--slant-font-inter), -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
    --slant-font-size-h1: var(--slant-size-64);
    --slant-font-size-h2: var(--slant-size-44);
    --slant-font-size-h3: var(--slant-size-40);
    --slant-font-size-h4: var(--slant-size-32);
    --slant-font-size-body-xl: var(--slant-size-20);
    --slant-font-size-body-l: var(--slant-size-18);
    --slant-font-size-body-m: var(--slant-size-16);
    --slant-font-size-body-s: var(--slant-size-12);
    --slant-font-size-body-xs: var(--slant-size-10);
    --slant-motion-transition: all 420ms cubic-bezier(0.19,1,0.22,1);
    --slant-layer-00: 0;
    --slant-layer-01: 1;
    --slant-layer-02: 2;
    --slant-layer-03: 3;
    --slant-layer-04: 4;
    --slant-layer-99: var(--slant-size-99);
    --slant-blur-00: var(--slant-size-00);
    --slant-blur-20: var(--slant-size-20);
    --slant-blur-40: var(--slant-size-40);
    --slant-device-desktop-lg: 2560px;
    --slant-device-desktop-md: 1440px;
    --slant-device-desktop-sm: 1024px;
    --slant-device-tablet: 768px;
    --slant-device-mobile: 425px;
    --slant-color-brand-css-600: #5d18dc;
    --slant-color-brand-css-dark-600: #1e2332;
    --_color-box: hsla(0,0%,100%,.04);
    --_color-dot: hsla(0,0%,100%,.3);
    --_color-line: hsla(0,0%,100%,.1);
    --_top-fade: linear-gradient(to top,color-mix(in srgb,#5d18dc,transparent 80%) 80%,#5d18dc);
    --_top-fade-size: 100%;
    --_top-fade-position: center;
    --_top-fade-repeat: no-repeat;
    --_main-gradient: linear-gradient(to bottom,transparent,#5d18dc);
    --_main-gradient-size: cover;
    --_main-gradient-position: center;
    --_main-gradient-repeat: no-repeat;
    --_dot-one: radial-gradient(var(--_color-dot) 1px,transparent 0);
    --_dot-one-size: 40px 40px;
    --_dot-one-position: 0 0;
    --_dot-one-repeat: repeat;
    --_dot-two: radial-gradient(var(--_color-dot) 1px,transparent 0);
    --_dot-two-size: 40px 40px;
    --_dot-two-position: 20px 20px;
    --_dot-two-repeat: repeat;
    --_box-inline: linear-gradient(to left,var(--_color-box) 1px,transparent 0px,transparent);
    --_box-inline-size: 6px 100%;
    --_box-inline-position: 18px 100%;
    --_box-inline-repeat: repeat-x;
    --_box-block: linear-gradient(to bottom,var(--_color-box) 1px,transparent 0px,transparent);
    --_box-block-size: 100% 6px;
    --_box-block-position: 100% 18px;
    --_box-block-repeat: repeat-y;
    --_line-inline: linear-gradient(to right,transparent 399px,var(--_color-line) 1px);
    --_line-inline-size: 400px 100%;
    --_line-inline-position: left;
    --_line-inline-repeat: repeat-x;
    --_line-block: linear-gradient(to top,transparent 399px,var(--_color-line) 1px);
    --_line-block-size: 100% 400px;
    --_line-block-position: top;
    --_line-block-repeat: repeat-y;
    --bg:var(--_top-fade),var(--_main-gradient),var(--_dot-one),var(--_dot-two),var(--_box-inline),var(--_box-block),var(--_line-inline),var(--_line-block);
    --size:var(--_top-fade-size),var(--_main-gradient-size),var(--_dot-one-size),var(--_dot-two-size),var(--_box-inline-size),var(--_box-block-size),var(--_line-inline-size),var(--_line-block-size);
    --position:var(--_top-fade-position),var(--_main-gradient-position),var(--_dot-one-position),var(--_dot-two-position),var(--_box-inline-position),var(--_box-block-position),var(--_line-inline-position),var(--_line-block-position);
    --repeat:var(--_top-fade-repeat),var(--_main-gradient-repeat),var(--_dot-one-repeat),var(--_dot-two-repeat),var(--_box-inline-repeat),var(--_box-block-repeat),var(--_line-inline-repeat),var(--_line-block-repeat);
    
    // background-color:var(--slant-color-brand-css-600);
    background-image:var(--bg);
    background-size:var(--size);
    background-position:var(--position);
    background-repeat:var(--repeat);
    opacity: 0;
    animation: pattern-loaded 668ms ease-in-out .42s forwards;
    pointer-events: none;
    &::after,&::before{
        content: "";
        display: flex;
        z-index: -9;
        top: 0;
        position: fixed;
        width: 1px;
        left: 0;
        opacity: .6;
        background: linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,0));
        animation: pattern-shimmer 6.18s linear infinite;
        animation-delay: 4.09s
    }
    &::before{
        height: 80px;
        transform: translateX(399px) translateY(-460px);
        animation-delay: 4.09s
    }
    &::after{
        height: 140px;
        transform: translateX(1599px) translateY(-280px)
    }
    .gradient {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        filter: blur(100px);
        opacity: .2;
        span{
            display: flex;
            filter: blur(48px);
            width: 100%;
            height: 80%;
            position: fixed;
            --tw-gradient-from: #ff80ca;
            --tw-gradient-to: #e546c0;
            --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
            background: linear-gradient(to right,var(--tw-gradient-stops));
            clip-path: polygon(73.6% 51.7%,91.7% 11.8%,100% 46.4%,97.4% 82.2%,92.5% 84.9%,75.7% 64%,55.3% 47.5%,46.5% 49.4%,45% 62.9%,50.3% 87.2%,21.3% 64.1%,.1% 100%,5.4% 51.1%,21.4% 63.9%,58.9% .2%,73.6% 51.7%)
        }
    }
    .text {
        display: flex;
        font-size: 800px;
        position: absolute;
        z-index: -1;
        pointer-events: none;
        font-family: var(--slant-font-jet);
        top: -1.5ex;
        line-height: 1;
        scale: 3;
        opacity: .4;
        // rotate: 42deg;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        font-family: sans-serif;
        font-weight: 900;
        font-feature-settings: "kern","ss02";
        color: #fff;
        mix-blend-mode: soft-light;
        -webkit-mask-image: linear-gradient(rgba(243,22,243,.5),rgba(243,22,243,0) 99%);
        mask-image:linear-gradient(rgba(243,22,243,.5),rgba(243,22,243,0) 99%);
    }

    span{
        display: none;
        filter: blur(48px);
        width: 100%;
        height: 100%;
        position: fixed;
        --tw-gradient-from: #ff80ca;
        --tw-gradient-to: #e546c0;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        background: linear-gradient(to right,var(--tw-gradient-stops));
        clip-path: polygon(73.6% 51.7%,91.7% 11.8%,100% 46.4%,97.4% 82.2%,92.5% 84.9%,75.7% 64%,55.3% 47.5%,46.5% 49.4%,45% 62.9%,50.3% 87.2%,21.3% 64.1%,.1% 100%,5.4% 51.1%,21.4% 63.9%,58.9% .2%,73.6% 51.7%)
    }

    @keyframes pattern-loaded {
        to {
            opacity: 1;
        }
    }
    
    @keyframes pattern-shimmer {
        to {
            top: 100%;
            opacity: 0
        }
    }
}